interface DocumentsPageProps {
  params: { userId: string };
}

export default function DocumentsPage({ params: { userId } }: DocumentsPageProps) {
  return (
    <div className="space-y-6">
      {/* 页面标题 */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold text-foreground">Documents</h1>
          <p className="text-muted-foreground mt-1">项目文档管理和协作编辑</p>
        </div>
        <div className="flex items-center space-x-2">
          <button className="px-4 py-2 border border-input rounded-lg hover:bg-accent transition-colors">
            导入文档
          </button>
          <button className="px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors">
            新建文档
          </button>
        </div>
      </div>

      {/* 文档统计 */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
        <div className="bg-card rounded-xl p-6 border shadow-sm">
          <div className="flex items-center space-x-3">
            <div className="w-10 h-10 bg-blue-100 dark:bg-blue-900/20 rounded-lg flex items-center justify-center">
              <span className="text-blue-600 dark:text-blue-400 text-lg">📄</span>
            </div>
            <div>
              <div className="text-2xl font-bold text-foreground">24</div>
              <div className="text-sm text-muted-foreground">总文档</div>
            </div>
          </div>
        </div>

        <div className="bg-card rounded-xl p-6 border shadow-sm">
          <div className="flex items-center space-x-3">
            <div className="w-10 h-10 bg-green-100 dark:bg-green-900/20 rounded-lg flex items-center justify-center">
              <span className="text-green-600 dark:text-green-400 text-lg">📝</span>
            </div>
            <div>
              <div className="text-2xl font-bold text-foreground">8</div>
              <div className="text-sm text-muted-foreground">最近编辑</div>
            </div>
          </div>
        </div>

        <div className="bg-card rounded-xl p-6 border shadow-sm">
          <div className="flex items-center space-x-3">
            <div className="w-10 h-10 bg-purple-100 dark:bg-purple-900/20 rounded-lg flex items-center justify-center">
              <span className="text-purple-600 dark:text-purple-400 text-lg">👥</span>
            </div>
            <div>
              <div className="text-2xl font-bold text-foreground">12</div>
              <div className="text-sm text-muted-foreground">共享文档</div>
            </div>
          </div>
        </div>

        <div className="bg-card rounded-xl p-6 border shadow-sm">
          <div className="flex items-center space-x-3">
            <div className="w-10 h-10 bg-yellow-100 dark:bg-yellow-900/20 rounded-lg flex items-center justify-center">
              <span className="text-yellow-600 dark:text-yellow-400 text-lg">📁</span>
            </div>
            <div>
              <div className="text-2xl font-bold text-foreground">6</div>
              <div className="text-sm text-muted-foreground">文件夹</div>
            </div>
          </div>
        </div>
      </div>

      {/* 搜索和筛选 */}
      <div className="flex items-center justify-between">
        <div className="flex items-center space-x-2">
          <input 
            type="text" 
            placeholder="搜索文档..." 
            className="px-4 py-2 border border-input rounded-lg bg-background w-64"
          />
          <select className="px-3 py-2 border border-input rounded-lg bg-background">
            <option>全部类型</option>
            <option>文档</option>
            <option>表格</option>
            <option>演示文件</option>
            <option>PDF</option>
          </select>
          <select className="px-3 py-2 border border-input rounded-lg bg-background">
            <option>最近修改</option>
            <option>名称</option>
            <option>创建时间</option>
            <option>文件大小</option>
          </select>
        </div>
        
        <div className="flex items-center space-x-1 bg-muted rounded-lg p-1">
          <button className="p-2 bg-background text-foreground rounded-md shadow-sm">
            <span className="text-sm">📄</span>
          </button>
          <button className="p-2 text-muted-foreground hover:bg-background rounded-md transition-colors">
            <span className="text-sm">📋</span>
          </button>
        </div>
      </div>

      {/* 文档列表 */}
      <div className="bg-card rounded-xl border shadow-sm">
        <div className="p-6">
          <div className="space-y-3">
            {/* 文档项 */}
            {[
              {
                name: '项目需求文档',
                type: 'document',
                size: '2.3 MB',
                modified: '2小时前',
                author: '张小明',
                shared: true,
                icon: '📄'
              },
              {
                name: '技术架构设计',
                type: 'document',
                size: '1.8 MB',
                modified: '4小时前',
                author: '李小红',
                shared: true,
                icon: '📄'
              },
              {
                name: '用户故事集合',
                type: 'spreadsheet',
                size: '850 KB',
                modified: '1天前',
                author: '王小刚',
                shared: false,
                icon: '📊'
              },
              {
                name: '产品演示PPT',
                type: 'presentation',
                size: '5.2 MB',
                modified: '2天前',
                author: '赵小美',
                shared: true,
                icon: '📽️'
              },
              {
                name: 'API接口文档',
                type: 'document',
                size: '1.2 MB',
                modified: '3天前',
                author: '刘小华',
                shared: true,
                icon: '📄'
              },
              {
                name: '测试计划',
                type: 'document',
                size: '980 KB',
                modified: '1周前',
                author: '陈小波',
                shared: false,
                icon: '📄'
              },
              {
                name: '部署指南',
                type: 'pdf',
                size: '3.1 MB',
                modified: '1周前',
                author: '张小明',
                shared: true,
                icon: '📕'
              },
              {
                name: '用户反馈汇总',
                type: 'spreadsheet',
                size: '720 KB',
                modified: '2周前',
                author: '李小红',
                shared: true,
                icon: '📊'
              }
            ].map((document, index) => (
              <div key={index} className="flex items-center space-x-4 p-4 hover:bg-muted/50 rounded-lg transition-colors group">
                <div className="text-2xl">{document.icon}</div>
                
                <div className="flex-1 min-w-0">
                  <div className="flex items-center space-x-2">
                    <h3 className="font-medium text-foreground truncate">{document.name}</h3>
                    {document.shared && (
                      <span className="text-xs bg-blue-100 dark:bg-blue-900/20 text-blue-800 dark:text-blue-400 px-2 py-1 rounded-full">
                        共享
                      </span>
                    )}
                  </div>
                  <div className="text-sm text-muted-foreground">
                    {document.author} • {document.modified} • {document.size}
                  </div>
                </div>
                
                <div className="flex items-center space-x-2 opacity-0 group-hover:opacity-100 transition-opacity">
                  <button className="p-2 hover:bg-accent rounded-lg transition-colors">
                    <span className="text-sm">👁️</span>
                  </button>
                  <button className="p-2 hover:bg-accent rounded-lg transition-colors">
                    <span className="text-sm">✏️</span>
                  </button>
                  <button className="p-2 hover:bg-accent rounded-lg transition-colors">
                    <span className="text-sm">↗️</span>
                  </button>
                  <button className="p-2 hover:bg-accent rounded-lg transition-colors">
                    <span className="text-sm">⋯</span>
                  </button>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* 最近协作 */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* 最近编辑的文档 */}
        <div className="bg-card rounded-xl border shadow-sm">
          <div className="p-6 border-b border-border">
            <h2 className="text-xl font-semibold text-foreground">最近编辑</h2>
          </div>
          <div className="p-6">
            <div className="space-y-4">
              {[
                {
                  name: '项目需求文档',
                  editor: '张小明',
                  time: '2小时前',
                  action: '添加了新的功能需求'
                },
                {
                  name: '技术架构设计',
                  editor: '李小红',
                  time: '4小时前',
                  action: '更新了数据库设计部分'
                },
                {
                  name: '用户故事集合',
                  editor: '王小刚',
                  time: '1天前',
                  action: '完成了用户角色定义'
                }
              ].map((activity, index) => (
                <div key={index} className="flex items-start space-x-3">
                  <div className="w-8 h-8 bg-primary rounded-full flex items-center justify-center text-primary-foreground text-sm font-medium">
                    {activity.editor[0]}
                  </div>
                  <div className="flex-1">
                    <p className="text-sm text-foreground">
                      <span className="font-medium">{activity.editor}</span>
                      {' '}编辑了{' '}
                      <span className="font-medium">{activity.name}</span>
                    </p>
                    <p className="text-xs text-muted-foreground">{activity.action}</p>
                    <p className="text-xs text-muted-foreground">{activity.time}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* 文档模板 */}
        <div className="bg-card rounded-xl border shadow-sm">
          <div className="p-6 border-b border-border">
            <h2 className="text-xl font-semibold text-foreground">文档模板</h2>
          </div>
          <div className="p-6">
            <div className="grid grid-cols-2 gap-4">
              {[
                { name: '项目计划', icon: '📋', color: 'blue' },
                { name: '会议纪要', icon: '📝', color: 'green' },
                { name: '需求文档', icon: '📄', color: 'purple' },
                { name: '测试报告', icon: '🧪', color: 'orange' }
              ].map((template, index) => (
                <button
                  key={index}
                  className="p-4 border border-border rounded-lg hover:bg-muted/50 transition-colors text-left"
                >
                  <div className="text-2xl mb-2">{template.icon}</div>
                  <div className="text-sm font-medium text-foreground">{template.name}</div>
                </button>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
} 